<!--
 * @Author: zhangweinan
 * @Date: 2022-11-16 09:45:46
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-02-13 10:45:37
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\index.vue
-->
<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <panel-group />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <pie-chart
            className="chart-item"
            :chartData="pieChartData"
            :pieTotal="pieTotal"
            name="流程分类"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <line-chart
            className="chart-item"
            :chart-data="lineChartData"
            titleText="审批耗时"
            :timeValue="timeValue"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-chart
            className="chart-item"
            :chart-data="barChartDataOne"
            titleText="本部门流程情况"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-chart
            className="chart-item"
            :chart-data="barChartDataTwo"
            titleText="流程逾期"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <hot-chart
            className="chart-item"
            :chart-data="hotChartData"
            titleText="我审核的任务"
            :xdata="hotXdata"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroupNew";
import LineChart from "./dashboard/LineChartNew";
import HotChart from "./dashboard/HotChart.vue";
import PieChart from "./dashboard/PieChartNew";
import BarChart from "./dashboard/BarChartNew";
import {
  getProcessModelDue,
  getHourDurationDateLine,
  getDeptTaskInfo,
  getTimeOutLine,
  getUserTaskLine,
} from "@/api/bpm/processStatistics";

const lineChartData = {
  newVisitis: {
    oneData: {
      name: "部门审核耗时",
      expectedData: [100, 120, 161, 134, 105, 160, 165],
    },
    twoData: {
      name: "我的审核耗时",
      actualData: [120, 82, 91, 154, 162, 140, 145],
    },
    xdata: [],
  },
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    HotChart,
    PieChart,
    BarChart,
  },
  data() {
    return {
      timeValue: 18.8,
      lineChartData: lineChartData.newVisitis,
      pieChartData: {
        xAxios: [],
        yAxios: [],
      },
      pieTotal: 0,
      hotChartData: [
        [1, 2, 3, 4, 5, 6],
        [2, 2, 3, 4, 5, 67],
        [1, 2, 3, 4, 5, 7],
        [2, 2, 3, 4, 5, 0],
        [1, 2, 3, 4, 5, 0],
        [2, 2, 3, 4, 5, 1],
        [2, 2, 3, 4, 5, 8],
      ],
      hotXdata: [],
      barChartDataOne: {
        xdata: [],
        oneData: {
          name: "流程总数",
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
          color: ["#7CACF7", "#4A79EE"],
        },
        twoData: {
          name: "流程办结数",
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
          color: ["#C2EBDB", "#4DEDB0"],
        },
      },
      barChartDataTwo: {
        xdata: [],
        oneData: {
          name: "部门逾期数",
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
          color: ["#F39BAC", "#EE4D6D"],
        },
        twoData: {
          name: "我的逾期数",
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
          color: ["#F7B979", "#EE9D4A"],
        },
      },
    };
  },
  methods: {
    getProcessModelDue() {
      getProcessModelDue().then((response) => {
        const { data } = response;
        let pieData = [];
        let xAxios = [];
        let total = 0;
        if (data.length === 0) return;
        data.forEach((item) => {
          let obj = {};
          obj.value = item.count;
          obj.name = item.categoryName;
          pieData.push(obj);
          xAxios.push(item.categoryName);
          total += Number(item.count);
        });
        this.pieChartData.yAxios = pieData;
        this.pieChartData.xAxios = xAxios;
        this.pieTotal = total;
        console.log(this.pieChartData, this.pieTotal);
      });
    },
    getHourDurationDateLine() {
      getHourDurationDateLine().then((res) => {
        let { deptDuration, durationAvg, myDuration, xdata } = res.data;
        this.lineChartData.oneData.expectedData = deptDuration;
        this.lineChartData.twoData.actualData = myDuration;
        this.timeValue = Number(durationAvg.toFixed(2));
        this.lineChartData.xdata = xdata;
      });
    },
    getDeptTaskInfo() {
      getDeptTaskInfo().then((res) => {
        let { xdata, totalCountList, endCountList } = res.data;
        this.barChartDataOne.xdata = xdata;
        this.barChartDataOne.oneData.data = totalCountList;
        this.barChartDataOne.twoData.data = endCountList;
      });
    },
    getTimeOutLine() {
      getTimeOutLine().then((res) => {
        let { xdata, deptData, myData } = res.data;
        this.barChartDataTwo.xdata = xdata;
        this.barChartDataTwo.oneData.data = deptData;
        this.barChartDataTwo.twoData.data = myData;
      });
    },
    getUserTaskLine() {
      getUserTaskLine().then((res) => {
        let { dataList, xdata } = res.data;
        //debugger;
        this.hotChartData = dataList.map((element, idx) => {
          return element.map((item, index) => {
            let arr = [idx, index, item];
            return arr;
          });
        });
        this.hotChartData = this.hotChartData.flat();
        console.log("ZZZZZ:", this.hotChartData);
        console.log("CCC:", xdata);
        this.hotXdata = xdata;
      });
    },
  },
  created() {
    //获取流程分类统计数据（饼状图）
    this.getProcessModelDue();
    //获取任务耗时统计数据（折线图）
    this.getHourDurationDateLine();
    //获取本部门流程情况统计数据（柱状图）
    this.getDeptTaskInfo();
    //获取流程逾期统计数据（柱状图）
    this.getTimeOutLine();
    //获取用户流程处理数量统计数据（热力图）
    this.getUserTaskLine();
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: #fff;
  position: relative;

  .chart-wrapper {
    height: 330px;
    background: #f9f9f9;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    .chart-item {
      background-color: #fff;
      padding: 14px;
    }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
